<template>
  <div class="content">
    <Suspense>
      <template #default>
        <SyncVue></SyncVue>
      </template>
      <template #fallback>
        <Skeleton></Skeleton>
      </template>
    </Suspense>
  </div>
</template>


<script setup lang='ts'>
import Skeleton from './components/Sync/skeleton.vue'
import { ref, reactive, defineAsyncComponent } from 'vue'

// 在打包组件时候，会自动将组件打包成异步组件，这样首屏加载的js不会过大，等用到时候才会调用
const SyncVue = defineAsyncComponent(() => import('./components/Sync/index.vue'))
// 完整写法
/* const SyncVue = defineAsyncComponent({
  loader: () => import('./components/Sync/index.vue'),          // 异步组件的加载函数
  loadingComponent: Skeleton,                                   // 加载时显示的组件
  errorComponent: () => import('./components/Sync/error.vue'),  // 加载失败时显示的组件
  delay: 2000                                                   // 延迟显示加载组件的时间 (单位：毫秒)
}) */

</script>


<style scoped lang='less'>
</style>